<template>
  <a-modal v-model:open="showModal" :maskClosable="false" :title="formTitle" @ok="confirm">
    <div class="px-[40px] mt-[30px]">
      <a-form :model="formData" ref="formRef" :label-col="{ style: { width: '80px' } }">
        <a-form-item label="菜单名称" name="menu_name" :rules="[{ required: true, message: '请输入菜单名称' }]">
          <a-input v-model:value="formData.menu_name" show-count :maxlength="10" />
        </a-form-item>
        <a-form-item label="菜单标识" name="menu_key" :rules="[{ required: true, message: '请输入菜单标识' }]">
          <a-input v-model:value="formData.menu_key" show-count :maxlength="50" />
        </a-form-item>
        <a-form-item label="菜单图标" name="icon" v-if="formData.menu_type < 2">
          <select-icon v-model="formData.icon" />
        </a-form-item>
        <a-form-item label="父级菜单" name="parent_key" help="为空则默认顶级菜单">
          <a-tree-select v-model:value="formData.parent_key" show-search placeholder="请选择上级菜单" :field-names="{
            children: 'children',
            label: 'menu_name',
            value: 'menu_key',
          }" allow-clear tree-default-expand-all :tree-data="deptSelect" tree-node-filter-prop="label">
          </a-tree-select>
        </a-form-item>
        <a-form-item label="菜单标识" name="menu_type">
          <a-radio-group v-model:value="formData.menu_type" name="menu_type">
            <a-radio :value="0">目录</a-radio>
            <a-radio :value="1">菜单</a-radio>
            <a-radio :value="2">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="路由路径" name="router_path"
          :rules="[{ required: true, message: '请输入路由路径' }]">
          <a-input v-model:value="formData.router_path" />
        </a-form-item>
        <a-form-item v-if="formData.menu_type == 1" label="组件路径" name="page_path"
          :rules="[{ required: true, message: '请输入组件路径' }]">
          <a-input v-model:value="formData.page_path" />
        </a-form-item>

        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="formData.status" name="status">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="0">停用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否显示" name="is_show">
          <a-radio-group v-model:value="formData.is_show" name="is_show">
            <a-radio :value="1">显示</a-radio>
            <a-radio :value="0">隐藏</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="排序" name="sort" :rules="[{ required: true, message: '排序' }]">
          <a-input-number v-model:value="formData.sort" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import type { TreeSelectProps } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import SelectIcon from '@/components/select-icon/index.vue';
import { addMenu, editMenu, getMenuList } from '@/utils/api/menu';

const showModal = ref<boolean>(false);

/**
 * 表单原始数据
 */
const initialFormData = {
  id: 0,
  menu_name: '',
  menu_key: '',
  icon: '',
  menu_type: 0,
  parent_key: '',
  router_path: '',
  page_path: '',
  methods: 'GET',
  source: 'system',
  status: 1,
  is_show: 1,
  sort: 100
}

const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref();

const formTitle = ref('添加菜单');

const setFormData = async (row: any = null) => {
  if (row == null) {
    formTitle.value = '添加菜单';
    Object.assign(formData, initialFormData);
  } else {
    formTitle.value = '编辑菜单';
    Object.assign(formData, row);
  }
}

const deptSelect = ref<TreeSelectProps['treeData']>([]);

// 初始化数据
const getMenuListData = () => {
  getMenuList({}).then((res: any) => {
    deptSelect.value = res.data;
  })
};

onMounted(() => {
  getMenuListData();
});

const confirm = (e: MouseEvent) => {
  formRef.value
    .validate()
    .then(() => {
      delete formData.children;
      if (formData.id > 0) {
        editMenu(formData).then((res: any) => {
          if (res.code == 200) {
            message.success(res.message);
            getMenuListData();
            showModal.value = false;
            setTimeout(function () {
              emit('complete');
            }, 1000);
          } else {
            message.error(res.message)
          }
        })
      } else {
        addMenu(formData).then((res: any) => {
          if (res.code == 200) {
            message.success(res.message);
            getMenuListData();
            showModal.value = false;
            setTimeout(function () {
              emit('complete');
            }, 1000);
          } else {
            message.error(res.message)
          }
        })
      }
    });
};

const emit = defineEmits(['complete'])

defineExpose({
  showModal,
  setFormData
})
</script>